<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>basic</title>
    <script src="js/three.js"></script>
    <script src="js/Stats.js"></script>
    <script src="js/dat.js"></script>
    <script src="js/ConvexGeometry.js"></script>
    <script src="js/ParametricGeometries.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="stats-output"></div>
<div id="WebGL-output"></div>
</body>
<script>
    function init() {
        var stats = initStats()

        var scene = new THREE.Scene()
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)

        var renderer = new THREE.WebGLRenderer()

        renderer.setClearColor(new THREE.Color(0xEEEEEE), 0)
        renderer.setSize(window.innerWidth, window.innerHeight)
        renderer.shadowMap.enabled = true

        var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1)
        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff})
        var plane = new THREE.Mesh(planeGeometry, planeMaterial)
        plane.receiveShadow = true

        plane.rotation.x = -0.5 * Math.PI
        plane.position.set(0, 0, 0)
        scene.add(plane)

        camera.position.set(-50, 30, 20)
        camera.lookAt(new THREE.Vector3(-10, 0, 0))

        var ambientLight = new THREE.AmbientLight(0x090909)
        scene.add(ambientLight)

        var spotLight = new THREE.SpotLight(0xffffff)
        spotLight.position.set(-40, 40, 50)
        spotLight.castShadow = true
        scene.add(spotLight)

        addGeometries(scene)

        document.getElementById('WebGL-output').appendChild(renderer.domElement)

        var step = 0
        render()

        function addGeometries(scene) {
            var geoms = []

            geoms.push(new THREE.CylinderBufferGeometry(1, 4, 4));

            geoms.push(new THREE.BoxGeometry(2, 2, 2))

            geoms.push(new THREE.SphereGeometry(2))

            geoms.push(new THREE.IcosahedronGeometry(4))

            var points = [
                new THREE.Vector3(2, 2, 2),
                new THREE.Vector3(2, 2, -2),
                new THREE.Vector3(-2, 2, -2),
                new THREE.Vector3(-2, 2, 2),
                new THREE.Vector3(2, -2, 2),
                new THREE.Vector3(2, -2, -2),
                new THREE.Vector3(-2, -2, -2),
                new THREE.Vector3(-2, -2, 2),
            ];
            geoms.push(new THREE.ConvexGeometry(points));

            var pts = []
            var detail = .1;
            var radius = 3;
            for (var angle = 0.0; angle < Math.PI; angle += detail) {
                pts.push(new THREE.Vector3(Math.cos(angle), 0, Math.sin(angle) * radius))
            }
            geoms.push(new THREE.LatheGeometry(pts, 12))

            geoms.push(new THREE.OctahedronGeometry(3))

            geoms.push(new THREE.ParametricGeometry(THREE.ParametricGeometries.mobius3d, 20, 10))

            geoms.push(new THREE.TetrahedronGeometry(3))

            geoms.push(new THREE.TorusGeometry(3, 1, 10, 10))

            geoms.push(new THREE.TorusKnotGeometry(3, 0.5, 50, 20))

            var j = 0;
            for (var i = 0; i < geoms.length; i++) {
                var cubeMaterial = new THREE.MeshLambertMaterial({wireframe: true, color: Math.random() * 0xffffff})

                var materials = [
                    new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff, shading: THREE.FlatShading}),
                    // new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})
                ]

                var mesh = THREE.SceneUtils.createMultiMaterialObject(geoms[i], materials)
                mesh.traverse(function (e) {
                    e.castShadow = true
                })

                mesh.position.set(-24 + ((i % 4) * 12), 4, -8 + (j * 12))
                if ((i + 1) % 4 === 0) {
                    j++
                }
                scene.add(mesh)
            }
        }

        function render() {
            stats.update()
            requestAnimationFrame(render)
            renderer.render(scene, camera)
        }

        function initStats() {
            var stats = new Stats()

            stats.setMode(0)
            stats.domElement.style.position = 'absolute'
            stats.domElement.style.left = '0px'
            stats.domElement.style.top = '0px'
            document.getElementById('stats-output').appendChild(stats.domElement)
            return stats
        }
    }

    init()
</script>
</html>